import 'package:flutter/material.dart';

class ChargingStationSelector extends StatelessWidget {
  const ChargingStationSelector({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          icon: const Icon(Icons.arrow_back_ios),
          onPressed: () {
            // Handle back button
            Navigator.of(context).pop();
          },
        ),
        title: const Text('Select a Charging Station'),
      ),
      body: Column(
        children: <Widget>[
          // Scanning Indicator
          const Padding(
            padding: EdgeInsets.all(8.0),
            child: Row(
              children: <Widget>[
                Icon(Icons.search),
                SizedBox(width: 10),
                Text('Scanning available devices nearby')
              ],
            ),
          ),
          Expanded(
            child: ListView.builder(
              itemCount: 5, // Replace with actual number of charging stations
              itemBuilder: (BuildContext context, int index) {
                return GestureDetector(
                  onTap: () {
                    // Handle item click here
                    print('Item $index clicked!');
                  },
                  child: Card(
                    margin: const EdgeInsets.fromLTRB(12, 10, 12, 0),
                    color: const Color.fromRGBO(0, 0, 0, 0.4),
                    shape: const RoundedRectangleBorder(
                        borderRadius: BorderRadius.all(Radius.circular(10.0))),
                    child: SizedBox(
                      height: 71,
                      child: _buildRow(index),
                    ),
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }

  Row _buildRow(int index) {
    return const Row(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        Padding(
          padding: EdgeInsets.only(left: 10.0),
          child: Image(
            image: AssetImage('assets/images/charge.png'),
            width: 35,
            height: 35,
          ),
        ),
        SizedBox(width: 6),
        Expanded(
            child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'Charging Station',
              textAlign: TextAlign.left,
              style: TextStyle(
                color: Colors.white,
                fontSize: 17,
                fontWeight: FontWeight.bold,
              ),
            ),
            SizedBox(height: 5),
            Text(
              'E30 AT0200200031',
              textAlign: TextAlign.left,
              style: TextStyle(
                color: Color.fromRGBO(195, 203, 212, 1.0),
                fontSize: 12,
                fontWeight: FontWeight.normal,
              ),
            )
          ],
        )),
        SizedBox(width: 6),
        Padding(
          padding: EdgeInsets.only(right: 25.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.end,
            children: [
              Image(
                image: AssetImage('assets/images/rssi4.png'),
                width: 25,
                height: 25,
              ),
              SizedBox(height: 5),
              Text(
                'No connected',
                textAlign: TextAlign.left,
                style: TextStyle(
                  color: Color.fromRGBO(195, 203, 212, 1.0),
                  fontSize: 12,
                  fontWeight: FontWeight.normal,
                ),
              )
            ],
          ),
        ),
      ],
    );
  }

  ListTile _buildListTile() {
    return ListTile(
      leading: const Image(
        image: AssetImage('assets/images/charge.png'),
        width: 35,
        height: 35,
      ),
      title: const Text(
        'Charging Station',
        style: TextStyle(
          color: Colors.white,
          fontSize: 18,
          fontWeight: FontWeight.bold,
        ),
      ),
      subtitle: const Text(
        'E30 AT2020200031',
        style: TextStyle(
          color: Color.fromRGBO(195, 203, 212, 1.0),
          fontSize: 12,
          fontWeight: FontWeight.normal,
        ),
      ),
      trailing: const Image(
        image: AssetImage('assets/images/rssi4.png'),
        width: 24,
        height: 24,
      ),
      onTap: () {
        // Handle the tap event
      },
    );
  }
}
